<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>会员洗车</title>
  <script type="text/javascript" src="/static/common/jquery/jquery.min.js"></script>
  <script src="/static/common/layer/layer.js"></script>
  <style>
    .maxbox{
      width: 100%;
    }

    img{
      width:100%;
      height: 396px;
    }
    .yuanjia{
      color: red;
    }
    .goumai {
      position: fixed;
      left: 0px;
      bottom: 0px;
      background: #2EBBF3;
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
    a{
      text-decoration: none;
      color: #fff;
    }
    h4{
      padding: 0px;
      margin: 0px;
    }

    .huiyuan{
      color: red;
    }

    s{
      color: #ccc;
    }
    .pa {
      position: relative;
      top: -24px;
      z-index: 99;
      text-align: center;
    }

    .swiper-pagination-bullet-active {
      
      background: #88D957;
    }

    .box{
      height: 92vh;
      padding-top: 5px;
      background-color: aliceblue;
    }

    .xinxi{
      margin-top: 20px;
      background-color: #fff;
    }

    .left{
      float: left;
      width: 25%;
      height: 4rem;
      line-height: 4rem;
      text-align: left;
      padding-left: 10%;
    }

    .right{
      float: right;
      width: 65%;
      text-align: left;
      height: 4rem;
      line-height: 4rem;
    }

    .clear{
      clear: both;
    }

    .inut{
      border-color: #e6e6e6;
      border-width: 1px;
      border-style: solid;
      background-color: #fff;
      border-radius: 2px;
      height: 25px;
      line-height: 25px;
    }

    .inp-rad{
      margin: 3px 0.5ex;
    }

    .form-control{
      width: 25%;
    }

    .form-group{
      margin-bottom: 0px;
    }

    .inutarea{
      border-color: #e6e6e6;
      border-width: 1px;
      border-style: solid;
      background-color: #fff;
      border-radius: 2px;
      height: 60px;
      line-height: 20px;
    }

    .rarea{
      height: 8rem;
    }

    .head_top{
      height: 6rem;
      line-height: 6rem;
      font-size: 18px;
    }

    .shops{
      margin-top: 10px;
      background: #fff;
      height: 80px;
    }

    .shops img{
      height: 80px;
    }

    .shewn{
      padding: 0px 20px 0px 10px;
      line-height: 20px;
    }

    .shewn p:nth-child(1){
      margin-top: -32px;
    }
    .zuo{
      float: left;
    }

    .you{
      float: right;
    }
    .shuliang{
      margin-top: 10px;
      background: #fff;
      height: 40px;
      line-height: 40px;
      margin-bottom:50px;
    }
    .shul{
    	border: 1px solid #ccc;
    	float: left;
        width: 40px;
        height: 33px;
        line-height: 35px;
        text-align: center;
    }
    .jian{
      display: inline-block;
      background: #ccc;
      height: 35px;
      width: 35px;
      text-align: center;
      line-height: 35px;
      float: left;
    }

    .jia{
      display: inline-block;
      background: #ccc;
      height: 35px;
      width: 35px;
      text-align: center;
      line-height: 35px;
      float: left;
    }

    .subtic{
      padding: 0px 0 0 8px;
      position: fixed;
      left: 0px;
      bottom: 0px;
      height: 40px;
      line-height: 40px;
      width: 100%;
      background: #FF0000;
      font-size: 14px;
          color: #ffffff;
    }
    .subbut{
      width: 70%;
      display: inline-block;
      height: 40px;
      line-height: 40px;
      padding: 0 18px;
      background-color: #E8C82C;
      color: #fff;
      white-space: nowrap;
      text-align: center;
      font-size: 14px;
      border: none;
      border-radius: 2px;
      cursor: pointer;
      position: absolute;
      right: 0px;
      top: 0px;
    }
  </style>
</head>
<body>
  <div class="maxbox">
    <div>
      <img src="{$jiyou.pic|getUrl}" alt="">
    </div>
    <form action="{:url('jiyou/xiadan')}" method="POST">
    <div class="">
      <h4>{$xiche.name}</h4>
      <p>{$jiyou.name} {$jiyou.jibie}级 {$jiyou.niandu}机油 {$jiyou.guige}</p>
      <p>会员价：<span class="huiyuan jiag">￥{$jiyou.huiyuan}</span> <s>原价：{$jiyou.mendian}</s></p>
    </div>
    <div class="shuliang">
      <div class="zuo">购买数量</div>
      <div class="you">
        <span class="jian">-</span>
        <span class="shul">1</span>
        <span class="jia">+</span>
      </div>
      <div class="clear"></div>
    </div>
    <input type="hidden" name="jid" value="{$jiyou.id}">
    <input type="hidden" name="xid" value="{$xiche.id}">
    <input type="hidden" name="num" class="nums" value="1">
    <div class="subtic">
      <span>合计：</span>
      <span class="heji"> {$jiyou.huiyuan}</span>
      <input class="subbut" type="submit" value="提交">
    </div>
    </form>
    <script>
        var jia = $('.jia');
        var jian = $('.jian');
        var shul = $('.shul');
        var shuls = $('.nums');
        var jiag = $('.jiag');
        var heji = $('.heji');
    
        var num = 0;
    
        jia.click(function(){
          var jisuan = jiag.text();
          var i = shul.text();
          i++;
          num = jisuan.substring(1)*i;
          num = num.toFixed(2); 
          shuls.val(i);
          shul.text(i);
          heji.text(num)
        });
    
        jian.click(function(){
          var jisuan = jiag.text();
          var i = shul.text();
          if(i == 1){
            i = 1;
          } else {
            i--;
          }
          num = jisuan.substring(1)*i;
          num = num.toFixed(2); 
          shul.text(i);
          shuls.val(i);
          heji.text(num);
        });
      </script>
  </div>
</body>
</html>